<template>
    <div class="info-list">
        <top-bar :isBlack="true" title="信息中心"></top-bar>
        <van-search v-model="search" @search="handelSearch" placeholder="请输入标题" />
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="list-item" v-for="item in list" :key="item.id" :title="item" @click="handleSelect(item)">
                <img src="@/assets/icon_04.png" alt="" class="icon" />
                <p class="title">
                    {{ item.title }}
                </p>
            </div>
        </van-list>
    </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
export default {
    name: "infoList",
    data() {
        return {
            search: "",
            list: [],
            loading: true,
            finished: false,
            page: 0,
        };
    },
    created() {
        this.onLoad();
    },
    methods: {
        handelSearch(val) {
            // console.log(val);
            this.page = 0;
            this.list = [];
            this.onLoad();
        },
        handleSelect(val) {
            // console.log(val);
            this.$router.push({
                path: "/seePdf",
                query: {
                    pdf: JSON.stringify(val),
                },
            });
        },
        onLoad() {
            this.$api
                .infos({
                    page: ++this.page,
                    key: this.search,
                    cate_id: this.$route.query.id,
                })
                .then((res) => {
                    this.loading = false;
                    if (res.status_code == 200) {
                        this.list.push(...res.data.data);
                        if (this.list.length >= res.data.total) {
                            this.finished = true;
                        }
                    }
                });
        },
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.info-list {
    .van-search__content {
        background-color: #f4f4f4;
    }
    .van-search {
        padding: 18px 15px;
        .van-cell {
            padding: 8px 8px 8px 0;
        }
    }
}
</style>
<style lang="scss" scoped>
.info-list {
    height: 100vh;
    z-index: 9;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    .list-item {
        display: flex;
        margin: 0 15px 19px;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #f4f4f4;
        .icon {
            width: 35px;
            height: 35px;
            margin-right: 11px;
        }
        .title {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            line-height: 20px;
            word-break: break-all;
        }
    }
}

@media screen and (min-width: 750px) {
    .info-list {
        width: 750px;
        left: 50%;
        transform: translateX(-50%);
        .list-item {
            .title {
                font-size: 20px;
            }
        }
    }
}
</style>
